<template>
	<view class="container">

		<!-- #ifdef H5 -->
		<view v-if="isApp == ''" class="download centerXY betweenX pad-left-right-30">
			<view class="color-white font-28">下载APP应用获得更好体验！</view>
			<view class="centerXY">
				<view @click="hanldeDownload" class="btn bg-theme font-26 color-white">下载APP</view>
				<u-icon @click="hanldeClose" class="mar-left-20" color="#fff" name='close'></u-icon>
			</view>
		</view>
		<!-- #endif -->

		<u-navbar placeholder bgColor="#0a0816" color="#FFF">
			<template slot="left">
				<!-- <view @click="hanldeReturn" class="centerY">
					<u-icon color="#303133" size="22" name="arrow-left-double"></u-icon>
					<text class="color-dark mar-left-5 font-28"> 商城</text>
				</view> -->
				<image class="login" src="../../static/icon/login-block.png"></image>
			</template>
			<template slot="right">
				<image @click="hanldeNotice" class="notice" src="../../static/icon/notice.png"></image>
			</template>
		</u-navbar>
		<view class="pad-top-15 pad-left-right-30 pad-bottom-30 swiper-width">

			<u-swiper @click="hanldeSwiper" indicator radius="30rpx" circular height="548rpx" :list="banner"
				keyName="img_url"></u-swiper>
			<!-- 金刚区 -->
			<!-- <view class="rowW gap46 mar-top-20">
				<view @click="hanldeDiamondInfo(item.jump)" class="diamond columnY centerXY"
					v-for="(item,index) in diamond" :key="index">
					<image class="item" :src="item.img_url" mode="logo"></image>
					<view class="mar-top-16 font-24">{{item.name}}</view>
				</view>
			</view> -->

			<view class="centerY notice-box radius32 mar-top-32 pad-left-right-24 pad-top-bottom-20 bg-theme1">
				<image class="notice-text" src="../../static/icon/notice-text-icon.png"></image>
				<view class="flex-w">
					<!-- :step="true" -->
					<u-notice-bar icon="" bgColor="transparent" @click="hanldeInfo" color="#fff" direction="column"
						:text="noticeList"></u-notice-bar>
				</view>
				<u-icon @click="hanldeNotice" color="#fff" size="28" name="list"></u-icon>
			</view>

		</view>
		<view class="bg-theme1 list-bottom swiper-width">
			<view class="mar-top-10">
				<view class="tab-box centerY">
					<view v-for="(item,index) in tabList" @click="hanldeTab(index,item)"
						:class="tabInx == index ? `tabOn${index}`:''" class="flex-w font-36 text-center color-grey">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="pad-left-right-30">
				<saleGoods v-if="list.length > 0" :list="list" @hanldeSaleList="hanldeSaleInfo"></saleGoods>
				<u-empty v-if="list.length == 0" text=" " icon="../../static/image/empty.png"></u-empty>
				<u-loadmore v-if="list.length > 0" :status="pageStatus" color="#8C9FAE" iconColor="#8C9FAE" />
			</view>
		</view>
		<my-popup content="您还未登录,是否立即登录？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeLogin"></my-popup>

		<u-popup :show="visibelNotice" @close="visibelNotice = false" mode="center" round="10" bgColor="transparent">
			<view class="notice-bg">
				<view class="font-50 pad-top-130 color-white pad-left-80">温馨提示</view>
			</view>
			<view class="notice-popup-box color-white">
				<scroll-view scroll-y="true">
					<view class="font-28 text-li">{{noticeText}}</view>
				</scroll-view>
				<view class="centerX">
					<view  @click="visibelNotice = false" class="determine text-center">我知道了</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		allOfPos,
		noticePageList,
		goodsSaleList,
		configIndex
	} from '@/config/api.js'

	// #ifdef APP-PLUS
	import APPUpdate, {
		getCurrentNo
	} from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
	// #endif
	export default {
		data() {
			return {
				// 默认选中数字藏品
				tabInx: 0,
				ps: 10,
				page: 1,
				// 后台page参数
				pageData: {},
				// 内容
				code: ['home', 'diamond'],
				// 藏品数据
				list: [],
				// banner
				banner: [],
				// 金刚区
				diamond: [],
				// 公告
				noticeList: [],
				// tab拦
				tabList: [{
						name: '数字藏品',
						goods_type: 1,
					},
					{
						name: '数字盲盒',
						goods_type: 2,
					},
				],
				// 加载中状态
				pageStatus: 'loadmore',
				isPopup: false,
				// 默认数字藏品
				goodsType: 1,
				// 下载app
				isApp: uni.getStorageSync('isApp'),
				// 公告弹窗
				visibelNotice: false,
				// 
				noticeText: ''
			}
		},
		onLoad(options) {
			this.getDataList();
			this.getContent();
			this.getnoticeList();
			// 页面初始化
			configIndex().then(res => {
				uni.setStorageSync('config', res.data);
			})

			// #ifdef APP-PLUS
			getCurrentNo(res => {
				// 进页面获取当前APP版本号（用于页面显示）
				this.version = res.version;
			});
			// #endif
		},
		// 上拉加载更懂
		onReachBottom() {
			if (this.pageData.next_page_url) {
				this.getDataList();
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			this.getDataList();
		},
		onShow() {
			this.getNoticea();
		},
		methods: {
			// 获取公告
			getNoticea() {
				configIndex({
					code_arr: ['notice']
				}).then(res => {
					configIndex({
						code_arr: ['is_notice']
					}).then(isRes => {
						if (isRes.data.is_notice === '1') {
							if (uni.getStorageSync('isNotice') == '') {
								uni.setStorageSync('isNotice', true)
								this.visibelNotice = true
							}
							this.noticeText = res.data.notice;
						}
					})
				})
			},
			// 下载
			hanldeDownload() {
				configIndex({
					code_arr: ['download_app']
				}).then(res => {
					if (uni.getSystemInfoSync().platform == 'android') {
						window.location.href = res.data.download_app;
						uni.setStorageSync('isApp', new Date().getTime());
						this.isApp = uni.getStorageSync('isApp');
					} else if (uni.getSystemInfoSync().platform == 'ios') {
						uni.showToast({
							title: '苹果App开发中...',
							icon: 'none',
							duration: 1500,
						})
					} else {
						console.log('运行在开发工具上');
					}
				})
			},
			// 关闭
			hanldeClose() {
				uni.setStorageSync('isApp', new Date().getTime());
				this.isApp = uni.getStorageSync('isApp');
			},
			// 拉新
			getQueryVariable() {
				return new Promise((resole, reject) => {
					let url = location.href
					let myParams = {}
					if (url.indexOf("?") !== -1) {
						let code = url.substr(0, url.indexOf("#"));
						let str = ''
						if (code.indexOf("?") === -1) {
							code = url.substr(url.indexOf("#") + 1);
							str = code.substr(code.indexOf("?") + 1);
						} else {
							str = code.substr(code.indexOf("?") + 1);
						}
						let strs = str.split("&");
						for (let i = 0; i < strs.length; i++) {
							myParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
						}
					}
					resole(myParams)
				})
			},
			// 检查APP是否有新版本
			onAPPUpdate() {
				// true 没有新版本的时候有提示，默认：false
				APPUpdate(true);
			},
			// 返回实体商城
			hanldeReturn() {
				uni.switchTab({
					url: uni.getStorageSync('path')
				})
			},
			// 去登录
			hanldeLogin() {
				this.isPopup = false;
				uni.navigateTo({
					url: '/pages/my/login'
				})
			},
			// 轮播图跳转
			hanldeSwiper(inx) {
				let url = this.banner[inx].jump;

				if (url == '') {
					return
				}

				// 站内页面
				if (url.substring(0, 6) == '/pages') {
					uni.navigateTo({
						url: url
					})
				} else {
					// 站外页面
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/web-view/web-view?url=' + url
					})
					// #endif
					// #ifdef H5
					window.location.href = url
					// #endif
				}
			},
			// tab 切换
			hanldeTab(inx, item) {
				if (this.tabInx == inx) {
					return
				}
				this.tabInx = inx;
				this.goodsType = item.goods_type
				this.page = 1;
				this.list = [];
				this.getDataList();
			},
			// 跳转公告详情
			hanldeInfo(e) {
				uni.navigateTo({
					url: '/pages/notice/noticeDetails?id=' + this.noticeInfo[e].id,
				})
			},
			// 金刚去跳转
			hanldeDiamondInfo(url) {
				if (uni.getStorageSync('token')) {
					if (url) {
						uni.navigateTo({
							url: url
						})
					} else {
						uni.$u.toast('暂未开放')
					}
				} else {
					this.isPopup = true;
				}
			},
			// 获取藏品列表
			getDataList() {
				this.pageStatus = 'loading';
				let data = {
					ps: this.ps,
					page: this.page,
					goods_type: this.goodsType
				}
				goodsSaleList(data).then(res => {
					this.pageStatus = 'loadmore';

					let {
						data
					} = res;
					this.pageData = data;
					this.page = data.current_page + 1;
					this.list = this.list.concat(data.data);

					// 结束下拉刷新
					uni.stopPullDownRefresh();

					// 没有更多了
					if (data.next_page_url == null) {
						this.pageStatus = 'nomore'
					}
				})
			},
			// 跳转藏品详情
			hanldeSaleInfo(id) {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/goods/details?id=' + id
					})
				} else {
					this.isPopup = true;
				}
			},
			// 跳转公告详情
			hanldeNotice() {
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			},
			// 获取公告
			getnoticeList() {
				noticePageList({
					ps: 5,
					page: 1
				}).then(res => {
					let {
						data
					} = res.data;

					this.noticeInfo = data;
					this.noticeList = data.map(item => {
						return item.title
					})
				})
			},
			// 获取内容
			getContent() {
				this.code.forEach(itme => {
					allOfPos({
						code: itme
					}).then(res => {
						if (itme == 'home') {
							this.banner = res.data.lists;
						} else {
							this.diamond = res.data.lists;
						}
					})
				})
			}
		}
	}
</script>


<style scoped lang="scss">
	.container {
		box-sizing: border-box;
		min-height: 100vh;
		background-image: url('../../static/image/my-bg.png');

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		::v-deep .u-tabs__wrapper__nav__item__text {
			display: block;
			width: 100%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
		}


		.login {
			width: 226rpx;
			height: 40rpx;
			margin-top: 10rpx;
		}

		.notice {
			width: 48rpx;
			height: 49rpx;
		}

		.notice-text {
			height: 70rpx;
			width: 70rpx;
		}
	}

	.title {
		font-size: 36rpx;
		color: $uni-color-warning;
	}

	.item {
		width: 96rpx;
		height: 96rpx;
		border-radius: 10rpx;
	}

	.notice-box {
		.notice {
			display: block;
			width: 56rpx;
			height: 74rpx;
		}

		.more {
			display: block;
			width: 48rpx;
			height: 48rpx;
		}
	}

	.tabOn0 {
		position: relative;
		height: 88rpx;
		line-height: 88rpx;
		z-index: 2;
		font-size: 36rpx;
		color: #ffffff !important;

		&::after {
			content: '';
			position: absolute;
			left: 0rpx;
			top: -15rpx;
			width: 100%;
			height: 102rpx;
			background: url('../../static/image/tab-bg.png');
			background-size: 100% 100%;
			z-index: -1;
		}

		// &::before {
		// 	content: '';
		// 	position: absolute;
		// 	left: 50%;
		// 	transform: translateX(-50%);
		// 	bottom: 0rpx;
		// 	width: 56rpx;
		// 	height: 6rpx;
		// 	background: red;
		// 	z-index: -1;
		// }
	}

	.tabOn1 {
		position: relative;
		height: 88rpx;
		line-height: 88rpx;
		z-index: 2;
		font-size: 36rpx;
		color: #fff !important;

		&::after {
			content: '';
			position: absolute;
			left: 0rpx;
			top: -15rpx;
			width: 100%;
			height: 102rpx;
			background: url('../../static/image/tab-bg2.png');
			background-size: 100% 100%;
			z-index: -1;
		}

		// &::before {
		// 	content: '';
		// 	position: absolute;
		// 	left: 50%;
		// 	transform: translateX(-50%);
		// 	bottom: 0rpx;
		// 	width: 56rpx;
		// 	height: 6rpx;
		// 	background: red;
		// 	z-index: -1;
		// }
	}

	.list-bottom {
		border-radius: 30rpx 30rpx 0 0;
		padding-bottom: 100rpx;
	}

	.download {
		z-index: 99;
		position: fixed;
		background-color: rgba(0, 0, 0, .3);
		width: 100%;
		line-height: 84rpx;
		top: 88rpx;
		left: 0rpx;
		backdrop-filter: blur(10rpx);
	}

	.btn {
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 30rpx;
		width: 140rpx;
		text-align: center;
	}

	.notice-popup-box {
		width: 600rpx;
		height: auto;
		min-height: 500rpx;
		max-height: 700rpx;
		padding: 25rpx 30rpx;
		box-sizing: border-box;
		background: linear-gradient(-63deg, #7683D9, #D8A0FE);
		margin-top: -40rpx;
		border-radius: 40rpx;
		border: 10rpx solid rgba(255, 255, 255, 0.64);
	}

	.notice-bg {
		width: 600rpx;
		height: 280rpx;
		display: block;
		background: url('../../static/image/notice-bg.png') no-repeat;
		background-size: 100% 100%;
	}

	.determine {
		width: 200rpx;
		height: 50rpx;
		background: $uni-bg-theme;
		font-size: 28rpx;
		line-height: 50rpx;
		margin-top: 30rpx;
		border-radius: 40rpx;
		border: 10rpx solid rgba(255, 255, 255, 0.64);
	}
	
	.text-li{
		text-indent: 50rpx;
	}
</style>